<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="网易云.css">
</head>

<body>
    <div class="top_search">
        <a class="top_img1" href="#">
            <img src="img/网易云音乐.png"
                style="width: 100%;height: 100%; background-color: aliceblue; border-radius: 20px;">
        </a>
        <a href="#" class="top_img2">
            <img src="img/top2.png" style="width: 100%;height: 100%;">
        </a>
        <div class="top_major">
            <div class="major active">
                <p>发现音乐</p>
            </div>
            <div class="major">
                <p>我的音乐</p>
            </div>
            <div class="major">
                <p>
                    关注
                </p>
            </div>
            <div class="major">
                <p>商城</p>
            </div>
            <div class="major">
                <p>音乐人</p>
            </div>
            <div class="major">
                <p>云推歌</p>
            </div>
            <div class="major">
                <p>下载客户端</p>
            </div>
            <div class="search">
                <img src="img/搜索.png" style="width: 19px;height: 19px;display: inline-block;background-color: white;">
                <input type="text" placeholder="音乐/视频/电台/用户" style="width: 120px;">
            </div>
        </div>
        <script>
            var major = document.querySelectorAll(".major")

            for (var i = 0; i < 7; i++) {
                major[i].onmouseover = function () {
                    for (var i = 0; i < 7; i++) {
                        major[i].className = "major";
                    }
                    this.className = "major active";
                }
            }
        </script>
        <div class="top_left1">
            <a href="#">
                创作者中心
            </a>
        </div>
        <a href="" class="dl">
            登录
        </a>
    </div>
    <div class="mid">
        <div class="mid_tet">
            <div class="tet">
                <p>
                    推荐
                </p>
            </div>
            <div class="tet">
                <p>
                    排行榜
                </p>
            </div>
            <div class="tet">
                <p>
                    歌单
                </p>
            </div>
            <div class="tet">
                <p>
                    主播电台
                </p>
            </div>
            <div class="tet">
                <p>
                    歌手
                </p>
            </div>
            <div class="tet">
                <p>
                    新碟上架
                </p>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="lbt" style="background-image: url(img/bg1.jpg);">
        <div class="lbt_mid">
            <ul class="item">
                <li class="list active"><img src="img/109951169515374457.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515378380.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515384989.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515398164.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515402387.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515404479.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515408987.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515410332.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515425251.jpg" style="width: 100%;height: 100%;"> </li>
                <li class="list"><img src="img/109951169515578502.jpg" style="width: 100%;height: 100%;"> </li>
            </ul>
            <ul class="pointList">
                <li class="point active" data-index="0"></li>
                <li class="point" data-index="1"></li>
                <li class="point" data-index="2"></li>
                <li class="point " data-index="3"></li>
                <li class="point " data-index="4"></li>
                <li class="point " data-index="5"></li>
                <li class="point " data-index="6"></li>
                <li class="point " data-index="7"></li>
                <li class="point " data-index="8"></li>
                <li class="point " data-index="9"></li>
            </ul>
        </div>
        <button class="btnleft" id="leftBtn"> <img src="img/向左箭头.png" style="width: 100%;height: 100%; border: 0px;"
                alt=""> </button>
        <button class="btnright" id="rightBtn"> <img src="img/向右箭头.png" alt=""
                style="width: 100%;height: 100%; border: 0px;"> </button>
        <script>
            var left = document.getElementById("leftBtn");
            var right = document.getElementById("rightBtn");
            var items = document.querySelectorAll(".list");
            var points = document.querySelectorAll(".point");
            var all = document.querySelector(".lbt");
            var index = 0;
            // 消除active
            var clearActive = function () {
                for (var i = 0; i < items.length; i++) {
                    items[i].className = "list";
                }
                for (var j = 0; j < points.length; j++) {
                    points[j].className = "point";
                }
            }
            var goLeft = function () {
                if (index == 0) {
                    index = 9;
                } else {
                    index--;
                }
                goIndex();
            }

            //右按钮事件
            var goRight = function () {
                if (index == 9) {
                    index = 0;
                } else {
                    index++;
                }
                goIndex();
            }
            //改变效果

            var goIndex = function () {
                clearActive();
                items[index].className = 'list active';
                points[index].className = 'point active'
            }
            //绑定事件监听
            // left.addEventListener('click', function () {
            //         goLeft();
            //         time = 0;//计时器跳转清零
            //     })
            left.onclick = function () {
                goLeft();
                timer = 0;//计时器跳转清零
            }

            right.addEventListener('click', function () {
                goRight();
                timer = 0;//计时器跳转清零
            })
            for (i = 0; i < points.length; i++) {
                points[i].addEventListener('click', function () {
                    var pointIndex = this.getAttribute("data-index");
                    index = pointIndex;
                    goIndex();
                    time = 0;//计时器跳转清零
                })
            }
            //计时器轮播效果
            var timer;
            function play() {
                timer = setInterval(() => {
                    timer++;
                    if (timer == 30) {
                        goRight();
                        timer = 0;
                    }
                }, 100)
            }
            play();
            //移入清除计时器
            all.onmousemove = function () {
                clearInterval(timer)
            }
            //移出启动计时器
            all.onmouseleave = function () {
                play();
            }
        </script>
    </div>
    <div class="rmtj">
        <div class="rmtj_top">
            <div class="rmtj_top_1">
                <img src="img/image.png" alt="" style="margin-top: 3px;">
                <a href="">热门推荐</a>
            </div>
            <div class="yinyue1">
                <p>华语</p>
            </div>
            <div class="yinyue2">
                <p>
                    流行
                </p>
            </div>
            <div class="yinyue3">
                <p>摇滚</p>
            </div>
            <div class="yinyue4">
                <p>民谣</p>
            </div>
            <div class="yinyue5">
                <p>电子</p>
            </div>
            <div class="gengduo">
                <p>更多</p>
            </div>
            <img src="img/imggengd.png" alt="">
        </div>
        <div class="rmtj_mid">
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
            <div class="rmtj_mid_tet">
                <img src="img/528865105234307.jpg" style="margin-top: 10px; margin-left: 10px;">
                <p>
                    [声线]&nbsp;空灵女声
                </p>
            </div>
        </div>
        <div class="rmtj_right">
            <div class="rmtj_right_top">
                <div class="rzgs">
                    <p>入驻歌手</p>
                </div>
                <a href=""> 查看全部></a>
            </div>
            <div class="gs"><img src="img/zhm.jpg" alt="">
                <div class="gsxx">
                    <p>张惠妹eMEI</p>
                    <p class="gx1">台湾歌手</p>
                </div>
            </div>
            <div class="gs"><img src="img/zhm.jpg" alt="">
                <div class="gsxx">
                    <p>张惠妹eMEI</p>
                    <p class="gx1">台湾歌手</p>
                </div>
            </div>
            <div class="gs"><img src="img/zhm.jpg" alt="">
                <div class="gsxx">
                    <p>张惠妹eMEI</p>
                    <p class="gx1">台湾歌手</p>
                </div>
            </div>
            <div class="gs"><img src="img/zhm.jpg" alt="">
                <div class="gsxx">
                    <p>张惠妹eMEI</p>
                    <p class="gx1">台湾歌手</p>
                </div>
            </div>
            <div class="gs"><img src="img/zhm.jpg" alt="">
                <div class="gsxx">
                    <p>张惠妹eMEI</p>
                    <p class="gx1">台湾歌手</p>
                </div>
            </div>
        </div>
        <div class="xdsj">
            <div class="xdsj_top">
                <img src="img/image.png" alt="">
                <p>新碟上架</p>
                <div class="gd">
                    <img src="img/imggengd.png" alt="">
                    <p class="gd1">更多</p>
                </div>
            </div>
</body>

</html>